<template>
    <div>
        <h3>供应商管理</h3>
        <el-table
                :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
                style="width: 100%">
            <el-table-column
                    label="供应商名称"
                    prop="providername">
            </el-table-column>
            <el-table-column
                    label="负责人"
                    prop="boss">
            </el-table-column>
            <el-table-column
                    label="经营范围"
                    prop="scope">
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row.providerid)">查看详情
                    </el-button>
                    <el-button
                            size="mini"
                            @click="change(scope.row.providerid)">修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="tabListPage">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="totalCount">
            </el-pagination>
        </div>

        <el-button type="primary" @click="addCustomer" style="margin: 20px;">添加</el-button>

        <div style="width:600px; height: 400px; border: 2px solid;">
            <span>--查询供应商信息--</span>

            <el-form ref="customerForm">
                <el-row>
                    <el-form-item label="供应商名称：" prop="customerName">
                        <el-input v-model="providername"></el-input>
                    </el-form-item>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-form-item label="经营范围：" prop="range">
                        <el-input v-model="address"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-button @click="findByName()">查询</el-button>
        </div>

    </div>
</template>

<script>
    export default {
        name:"SupplierView",
        data() {
            return {
                providername:"",
                address:"",
                totalCount:null,
                // 默认显示第几页
                currentPage:1,
                // 个数选择器（可修改）
                pageSizes:[1,2,3,4],
                // 默认每页显示的条数（可修改）
                PageSize:3,

                tableData: [],
                search: ''
            }
        },

        mounted() {
            this.findByName()
        },

        methods: {

            findByName(){
                let url = "api/provider/findByItem?name="+this.providername+"&scope="+this.address
                this.$axios.get(url).then(r =>{
                    console.log(r.data)
                    this.tableData = r.data
                })
            },

            handleEdit(id) {
                this.$store.state.providerid = id
                this.$router.push("FindSupplier")

            },
            change(id) {
                this.$store.state.providerid = id
                this.$router.push("UpdateProvider")
            },

            addCustomer() {

                this.$router.push("AddProvider")
            },

            handleSizeChange(size) {
                // 改变每页显示的条数
                this.PageSize=size
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页 //
            handleCurrentChange(size) {
                // 改变默认的页数
                this.currentPage=size
            },
        },
    }
</script>